import {ResultCode} from "../../network.js";
import popupInfo from "../../components/popupInfo.js";
import squareButton from "../../components/squareButton.js";
import {
    getLoginUser, getHospitalFromId,
    getDepartmentsFromHospitalId
} from "../utils/common_network.js";


export default {
    components: {
        'popup-info': popupInfo,
        'square-button': squareButton,
    },
    props: {
        id: String,
    },
    setup(props) {
        const popup = Vue.ref(null);
        const user = Vue.ref({name: "姓名"});
        const router = VueRouter.useRouter();
        const route = VueRouter.useRoute();
        const hospital = Vue.ref({
            name: "医院名称", address: "医院地址"
        })
        const departments = Vue.ref([]);
        const selectedDepartmentIndex = Vue.ref(0);

        function backToIndex() {
            router.push({path: "/"});
        }

        Vue.onMounted(() => {
            getLoginUser(popup, backToIndex, user);
            getHospitalFromId(props.id, hospital);
            getDepartmentsFromHospitalId(props.id, departments);
            contentResize();
        });

        const navbar = Vue.ref(null);
        const content = Vue.ref(null);

        function contentResize() {
            if (navbar.value !== null && navbar.value !== undefined) {
                console.log('resize navbar');
                const height = navbar.value.clientHeight;
                content.value.style.marginTop = height + "px";
            }
        }

        function onBackToIndexClick() {

            backToIndex();
        }

        Vue.onBeforeUnmount(() => {
            window.removeEventListener('resize', contentResize);
        });

        function getSelectedDepartmentStyle(index) {
            if (index === selectedDepartmentIndex.value) {
                console.log('selected index: ' + index);
                return {
                    'background': '#5DC3F8FF'
                }
            }
            return {};
        }

        function onDepartmentClick(index) {
            selectedDepartmentIndex.value = index;
        }

        const selectedDepartmentName = Vue.computed({
            get() {
                const department = departments.value[selectedDepartmentIndex.value];
                if (department !== undefined) {
                    return department.name;
                }
                return "";
            },
        });
        const selectedDepartmentInfo = Vue.computed({
            get() {
                const department = departments.value[selectedDepartmentIndex.value];
                if (department !== undefined) {
                    return department.info;
                }
                return "";
            },
        });

        window.addEventListener('resize', contentResize);

        function onRegisterClick() {
            router.push({path: '/register/' + props.id});
        }

        function onWorkInfoClick() {
            router.push({path: '/work_info/' + props.id});
        }

        function onCaseInfoClick() {
            router.push({path: '/case_info/' + user.value.id});
        }

        return {
            popup, router, route, user, navbar, content,
            hospital, onBackToIndexClick,
            departments, getSelectedDepartmentStyle,
            selectedDepartmentIndex, onDepartmentClick,
            selectedDepartmentName, selectedDepartmentInfo,
            onRegisterClick, onWorkInfoClick, onCaseInfoClick
        };
    },
    template: `
    <popup-info
            ref="popup"
    ></popup-info>
    <div class="container-fluid" ref="content">
    <square-button background-url="/images/logo.png"
                   :width-in-parent=7
                   left="5%"
                   top="0%"
                   :z-index="1031"
                   @onClick="onBackToIndexClick"
    ></square-button>
    <nav class="navbar-fixed-top" 
        style="background: linear-gradient(rgba(187,207,226,1) 10.041%, rgba(255,255,255,1) 100%);"
        ref="navbar">
        <div class="row" style="padding-top: 2%;">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-8">
                        <div style="font-size: 30px; border-left: 2px solid #000000; padding-left: 20px;" class="my-font">
                            {{hospital.name}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div style="font-size: 24px;" class="my-font">
                    姓名：{{user.name}}
                </div>
            </div>
        </div>
        <hr style="border-top: 2px solid rgba(0, 0, 0, 0.49);
        margin-bottom: 0;"/>
    </nav>
    <div class="row" style="border-radius: 15px;
        border: 2px solid; margin-left: 5%; margin-right: 5%;margin-top: 20px;">
        <div class="col-md-4">
            <div class="row" style="height: 100px;">
                <div class="col-md-2"></div>
                <div class="col-md-4" 
                style="background: url('/images/user_main/register.png') no-repeat center;
                    height: 100%;cursor: pointer;
                    background-size: 60%;" @click="onRegisterClick">
                </div>
                <div class="col-md-6" style="height: 100%;padding-top: 20px;
                padding-bottom: 20px;padding-left: 0;cursor: pointer" @click="onRegisterClick">
                    <div style="font-size: 24px;height: 30px;line-height: 30px;vertical-align: bottom;">
                        预约挂号
                    </div>
                    <div style="font-size: 16px;height: 30px;line-height: 30px;vertical-align: top;">
                        足不出户挂上号
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row" style="height: 100px;">
                <div class="col-md-2"></div>
                <div class="col-md-4" 
                style="background: url('/images/user_main/schedule.png') no-repeat center;
                    height: 100%;cursor: pointer;
                    background-size: 60%;" @click="onWorkInfoClick">
                </div>
                <div class="col-md-6" style="height: 100%;padding-top: 20px;
                padding-bottom: 20px;padding-left: 0;cursor: pointer;" @click="onWorkInfoClick">
                    <div style="font-size: 24px;height: 30px;line-height: 30px;vertical-align: bottom;">
                        门诊排班
                    </div>
                    <div style="font-size: 16px;height: 30px;line-height: 30px;vertical-align: top;">
                        实时了解门诊信息
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row" style="height: 100px;">
                <div class="col-md-2"></div>
                <div class="col-md-4" 
                style="background: url('/images/user_main/report.png') no-repeat center;
                    height: 100%;cursor: pointer;
                    background-size: 60%;" @click="onCaseInfoClick">
                </div>
                <div class="col-md-6" style="height: 100%;padding-top: 20px;
                padding-bottom: 20px;padding-left: 0;cursor: pointer;" 
                @click="onCaseInfoClick">
                    <div style="font-size: 24px;height: 30px;line-height: 30px;vertical-align: bottom;">
                        病历查询
                    </div>
                    <div style="font-size: 16px;height: 30px;line-height: 30px;vertical-align: top;">
                        查询病历更方便
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr style="border-top: 2px solid rgba(0, 0, 0, 0);"/>
    <div class="row" style="height: 800px;
    background: url('/images/user_main/content_background.png');
    background-size: auto 100%;
    ">
        <div class="col-md-5" style="left: 5%;">
            <div style="font-size: 24px;" class="my-font">科室导航
                <img src="/images/user_main/navigation.png" style="height: 80px;">
            </div>
            <table style="padding-left: 20px;">
                <tr style="font-size: 20px;margin: 20px 40px 20px 20px;
                        border-radius: 10px;cursor: pointer;display: block;
                        padding-right: 10px"
                    class="my-font"
                    :style="getSelectedDepartmentStyle(index)"
                    v-for="(item, index) in departments"
                    @click="onDepartmentClick(index)">
                    ·{{item.name}}
                </tr>
            </table>
        </div>
        <div class="col-md-7">
            <div style="height: 250px;"></div>
            <div class="row">
                <div class="col-md-1">
                </div>
                <div class="col-md-10" style="border-radius: 15px; background-color: #098bce;
                min-height: 200px;max-height: 400px;overflow-y: auto;">
                    <div style="padding-top: 15px; margin-left: 20px; margin-right: 20px;">
                        <div class="nss-font"
                            style="border-left: 3px solid #ffffff; 
                                padding-left: 10px; color: #ffffff; font-size: 24px;">
                            {{selectedDepartmentName}}
                        </div>
                    </div>
                    <div class="nss-font"
                        style="margin-left: 20px; margin-right: 20px; color: #ffffff;
                         font-size: 20px; text-indent: 2em;padding-bottom: 15px;">
                        {{selectedDepartmentInfo}}
                    </div>
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;">
    <div class="col-md-12" style="padding-left: 0; padding-right: 0;">
        <div style="text-align: center; height: 80px; font-size: 20px; vertical-align: center; line-height: 80px; background-color: #587488; color: #ffffff;">
            地址: {{hospital.address}}
        </div>
    </div>
</div>`,

}